<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">


<h:head>
	<title>Elegir Asiento</title>
	<link href="./../css/styles.css" rel="stylesheet" type="text/css"/> 
	<script src="./js/validacionesElegirAsiento.js" type="text/javascript"></script>
</h:head>
<h:body>
	
	<h:form id="frmElegirAsiento" >
	<center>
	
	<p:panel id="pnlBody" header="PASO 2: Elegir Asiento" style="width: 950px !important;">
	
		<table width="100%">
			<tr>
				<td colspan="2">
					<p:panel id="pnlItinerario" header="Itinerario Ida">
						<table width="100%">
							<tr>
								<td><h:outputText value="Ciudad Origen"></h:outputText></td>
								<td><h:outputText value=""></h:outputText></td>
							</tr>
							<tr>
								<td><h:outputText value="Ciudad Destino"></h:outputText></td>
								<td><h:outputText value=""></h:outputText></td>
							</tr>
							<tr>
								<td><h:outputText value="Salida"></h:outputText></td>
								<td><h:outputText value=""></h:outputText></td>
							</tr>
							<tr>
								<td><h:outputText value="Llegada"></h:outputText></td>
								<td><h:outputText value=""></h:outputText></td>
							</tr>
						</table>
					</p:panel>
				</td>
			</tr>
			<tr>
				<td>
					<p:panel id="pnlSeccionAsiento" header="1. Escoja su asiento:" style="width: 350px;">
					
					
						<table border="1" cellpadding="0" cellspacing="0" class="usmp_detail_record_view">
							<tr id="primerpiso">
								<td colspan="4" class="cssPiso"><h:outputText value="PRIMER PISO" ></h:outputText></td>
							</tr>
							<tr id="row01">
								<td id="asiento03"><h:commandButton id="btnAsiento3" value="03" styleClass="#{itinerario.obtenerClasePorNroAsiento(3)}" action="#{itinerario.elegirNumeroAsiento(3)}"></h:commandButton> </td>
								<td id="asiento02"><h:commandButton id="btnAsiento2" value="02" styleClass="#{itinerario.obtenerClasePorNroAsiento(2)}" action="#{itinerario.elegirNumeroAsiento(2)}"></h:commandButton></td>
								<td ></td>
								<td id="asiento01"><h:commandButton id="btnAsiento1" value="01" styleClass="#{itinerario.obtenerClasePorNroAsiento(1)}" action="#{itinerario.elegirNumeroAsiento(1)}"></h:commandButton></td>
							</tr>
							<tr id="row02">
								<td id="asiento06"><h:commandButton id="btnAsiento6" value="06" styleClass="#{itinerario.obtenerClasePorNroAsiento(6)}" action="#{itinerario.elegirNumeroAsiento(6)}"></h:commandButton></td>
								<td id="asiento05"><h:commandButton id="btnAsiento5" value="05" styleClass="#{itinerario.obtenerClasePorNroAsiento(5)}" action="#{itinerario.elegirNumeroAsiento(5)}"></h:commandButton></td>
								<td></td>
								<td id="asiento04"><h:commandButton id="btnAsiento4" value="04" styleClass="#{itinerario.obtenerClasePorNroAsiento(4)}" action="#{itinerario.elegirNumeroAsiento(4)}"></h:commandButton></td>
							</tr>
							<tr id="row03">
								<td id="asiento09"><h:commandButton id="btnAsiento9" value="09" styleClass="#{itinerario.obtenerClasePorNroAsiento(9)}" action="#{itinerario.elegirNumeroAsiento(9)}"></h:commandButton></td>
								<td id="asiento08"><h:commandButton id="btnAsiento8" value="08" styleClass="#{itinerario.obtenerClasePorNroAsiento(8)}" action="#{itinerario.elegirNumeroAsiento(8)}"></h:commandButton></td>
								<td></td>
								<td id="asiento07"><h:commandButton id="btnAsiento7" value="07" styleClass="#{itinerario.obtenerClasePorNroAsiento(7)}" action="#{itinerario.elegirNumeroAsiento(7)}"></h:commandButton></td>
							</tr>
							<tr id="row04">
								<td id="asiento12"><h:commandButton id="btnAsiento12" value="12" styleClass="#{itinerario.obtenerClasePorNroAsiento(12)}" action="#{itinerario.elegirNumeroAsiento(12)}"></h:commandButton></td>
								<td id="asiento11"><h:commandButton id="btnAsiento11" value="11" styleClass="#{itinerario.obtenerClasePorNroAsiento(11)}" action="#{itinerario.elegirNumeroAsiento(11)}"></h:commandButton></td>
								<td></td>
								<td id="asiento10"><h:commandButton id="btnAsiento10" value="10" styleClass="#{itinerario.obtenerClasePorNroAsiento(10)}" action="#{itinerario.elegirNumeroAsiento(10)}"></h:commandButton></td>
							</tr>
							<tr id="primerpiso">
								<td colspan="4" class="cssPiso"><h:outputText value="SEGUNDO PISO" ></h:outputText></td>
							</tr>
							
							<tr id="row05">
								<td id="asiento15"><h:commandButton id="btnAsiento15" value="15" styleClass="#{itinerario.obtenerClasePorNroAsiento(15)}" action="#{itinerario.elegirNumeroAsiento(15)}"></h:commandButton></td>
								<td id="asiento14"><h:commandButton id="btnAsiento14" value="14" styleClass="#{itinerario.obtenerClasePorNroAsiento(14)}" action="#{itinerario.elegirNumeroAsiento(14)}"></h:commandButton></td>
								<td></td>
								<td id="asiento13"><h:commandButton id="btnAsiento13" value="13" styleClass="#{itinerario.obtenerClasePorNroAsiento(13)}" action="#{itinerario.elegirNumeroAsiento(13)}"></h:commandButton></td>
							</tr>
							<tr id="row06">
								<td id="asiento18"><h:commandButton id="btnAsiento18" value="18" styleClass="#{itinerario.obtenerClasePorNroAsiento(18)}" action="#{itinerario.elegirNumeroAsiento(18)}"></h:commandButton></td>
								<td id="asiento17"><h:commandButton id="btnAsiento17" value="17" styleClass="#{itinerario.obtenerClasePorNroAsiento(17)}" action="#{itinerario.elegirNumeroAsiento(17)}"></h:commandButton></td>
								<td></td>
								<td id="asiento16"><h:commandButton id="btnAsiento16" value="16" styleClass="#{itinerario.obtenerClasePorNroAsiento(16)}" action="#{itinerario.elegirNumeroAsiento(16)}"></h:commandButton></td>
							</tr>
							<tr id="row07">
								<td id="asiento21"><h:commandButton id="btnAsiento21" value="21" styleClass="#{itinerario.obtenerClasePorNroAsiento(21)}" action="#{itinerario.elegirNumeroAsiento(21)}"></h:commandButton></td>
								<td id="asiento20"><h:commandButton id="btnAsiento20" value="20" styleClass="#{itinerario.obtenerClasePorNroAsiento(20)}" action="#{itinerario.elegirNumeroAsiento(20)}"></h:commandButton></td>
								<td></td>
								<td id="asiento19"><h:commandButton id="btnAsiento19" value="19" styleClass="#{itinerario.obtenerClasePorNroAsiento(19)}" action="#{itinerario.elegirNumeroAsiento(19)}"></h:commandButton></td>
							</tr>
							<tr id="row08">
								<td id="asiento24"><h:commandButton id="btnAsiento24" value="24" styleClass="#{itinerario.obtenerClasePorNroAsiento(24)}" action="#{itinerario.elegirNumeroAsiento(24)}"></h:commandButton></td>
								<td id="asiento23"><h:commandButton id="btnAsiento23" value="23" styleClass="#{itinerario.obtenerClasePorNroAsiento(23)}" action="#{itinerario.elegirNumeroAsiento(23)}"></h:commandButton></td>
								<td></td>
								<td id="asiento22"><h:commandButton id="btnAsiento22" value="22" styleClass="#{itinerario.obtenerClasePorNroAsiento(22)}" action="#{itinerario.elegirNumeroAsiento(22)}"></h:commandButton></td>
							</tr>
							<tr id="row09">
								<td id="asiento27"><h:commandButton id="btnAsiento27" value="27" styleClass="#{itinerario.obtenerClasePorNroAsiento(27)}" action="#{itinerario.elegirNumeroAsiento(27)}"></h:commandButton></td>
								<td id="asiento26"><h:commandButton id="btnAsiento26" value="26" styleClass="#{itinerario.obtenerClasePorNroAsiento(26)}" action="#{itinerario.elegirNumeroAsiento(26)}"></h:commandButton></td>
								<td></td>
								<td id="asiento25"><h:commandButton id="btnAsiento25" value="25" styleClass="#{itinerario.obtenerClasePorNroAsiento(25)}" action="#{itinerario.elegirNumeroAsiento(25)}"></h:commandButton></td>
							</tr>
							<tr id="row10">
								<td id="asiento30"><h:commandButton id="btnAsiento30" value="30" styleClass="#{itinerario.obtenerClasePorNroAsiento(30)}" action="#{itinerario.elegirNumeroAsiento(30)}"></h:commandButton></td>
								<td id="asiento29"><h:commandButton id="btnAsiento29" value="29" styleClass="#{itinerario.obtenerClasePorNroAsiento(29)}" action="#{itinerario.elegirNumeroAsiento(29)}"></h:commandButton></td>
								<td></td>
								<td id="asiento28"><h:commandButton id="btnAsiento28" value="28" styleClass="#{itinerario.obtenerClasePorNroAsiento(28)}" action="#{itinerario.elegirNumeroAsiento(28)}"></h:commandButton></td>
							</tr>
							<tr id="row11">
								<td id="asiento33"><h:commandButton id="btnAsiento33" value="33" styleClass="#{itinerario.obtenerClasePorNroAsiento(33)}" action="#{itinerario.elegirNumeroAsiento(33)}"></h:commandButton></td>
								<td id="asiento32"><h:commandButton id="btnAsiento32" value="32" styleClass="#{itinerario.obtenerClasePorNroAsiento(32)}" action="#{itinerario.elegirNumeroAsiento(32)}"></h:commandButton></td>
								<td></td>
								<td id="asiento31"><h:commandButton id="btnAsiento31" value="31" styleClass="#{itinerario.obtenerClasePorNroAsiento(31)}" action="#{itinerario.elegirNumeroAsiento(31)}"></h:commandButton></td>
							</tr>
							<tr id="row12">
								<td id="asiento36"><h:commandButton id="btnAsiento36" value="36" styleClass="#{itinerario.obtenerClasePorNroAsiento(36)}" action="#{itinerario.elegirNumeroAsiento(36)}"></h:commandButton></td>
								<td id="asiento35"><h:commandButton id="btnAsiento35" value="35" styleClass="#{itinerario.obtenerClasePorNroAsiento(35)}" action="#{itinerario.elegirNumeroAsiento(35)}"></h:commandButton></td>
								<td></td>
								<td id="asiento34"><h:commandButton id="btnAsiento34" value="34" styleClass="#{itinerario.obtenerClasePorNroAsiento(34)}" action="#{itinerario.elegirNumeroAsiento(34)}"></h:commandButton></td>
							</tr>
							<tr id="row13">
								<td id="asiento38"><h:commandButton id="btnAsiento38" value="38" styleClass="#{itinerario.obtenerClasePorNroAsiento(38)}" action="#{itinerario.elegirNumeroAsiento(38)}"></h:commandButton></td>
								<td id="asiento37"><h:commandButton id="btnAsiento37" value="37" styleClass="#{itinerario.obtenerClasePorNroAsiento(37)}" action="#{itinerario.elegirNumeroAsiento(37)}"></h:commandButton></td>
								<td></td>
								<td></td>
							</tr>
						</table>
						
					
					</p:panel>
				</td>
				<td valign="top">
				
					<p:panel id="pnlDatosPasajero" header="2. Complete los datos del pasajero" style="width: 450px;">
					
					<table class="datosPasajero">
						<tr>
							<td colspan="2" class="cssPiso">
								DATOS DEL PASAJERO
							</td>
						</tr>
						<tr>
							<td><h:outputText value="Tipo de Documento"></h:outputText></td>
							<td>
								<h:selectOneMenu  id="cboTipoDocumento" value="#{itinerario.persona.tipoDoc.id}">
							   		<f:selectItems value="#{itinerario.lstTipoDocs}" var="obj"
					                       itemLabel="#{obj.nombre}" itemValue="#{obj.id}"></f:selectItems>
					            </h:selectOneMenu>
							</td>
						</tr>
						<tr>
							<td><h:outputText value="Número de Documento"></h:outputText></td>
							<td><h:inputText id="txtNumDocumento" value="#{itinerario.persona.numDoc}"></h:inputText></td>
						</tr>
						<tr>
							<td><h:outputText value="Apellido Paterno"></h:outputText></td>
							<td><h:inputText id="txtApePat" value="#{itinerario.persona.apePat}"></h:inputText></td>
						</tr>
						<tr>
							<td><h:outputText value="Apellido Materno"></h:outputText></td>
							<td><h:inputText id="txtApeMat" value="#{itinerario.persona.apeMat}"></h:inputText></td>
						</tr>
						<tr>
							<td><h:outputText value="Nombres"></h:outputText></td>
							<td><h:inputText id="txtNombres" value="#{itinerario.persona.nombres}"></h:inputText></td>
						</tr>
						<tr>
							<td><h:outputText value="Fecha de Nacimiento"></h:outputText></td>
							<td><h:inputText id="txtFechaNacimiento" value="#{itinerario.persona.fecNac}"></h:inputText></td>
						</tr>
						<tr>
							<td><h:outputText value="Nacionalidad"></h:outputText></td>
							<td>
								<h:selectOneMenu  id="cboNacionalidad" value="#{itinerario.persona.idNacionalidad}"
													onchange="submit()" valueChangeListener="#{itinerario.cambiaPais}">
							   		<f:selectItems value="#{itinerario.lstPaises}" var="obj"
					                       itemLabel="#{obj.nombre}" itemValue="#{obj.id}"></f:selectItems>
					            </h:selectOneMenu>
							</td>
						</tr>
						<tr>
							<td><h:outputText value="Localidad"></h:outputText></td>
							<td>
								<h:selectOneMenu  id="cboLocalidad" value="#{itinerario.persona.idLocalidad}"
													onchange="submit()" valueChangeListener="#{itinerario.cambiaLocalidad}">
							   		<f:selectItems value="#{itinerario.lstDepartamento}" var="obj"
					                       itemLabel="#{obj.nombre}" itemValue="#{obj.id}"></f:selectItems>
					            </h:selectOneMenu>
							</td>
						</tr>
						<tr>
							<td><h:outputText value="Provincia"></h:outputText></td>
							<td>
								<h:selectOneMenu  id="cboProvincia" value="#{itinerario.persona.idProvincia}">
							   		<f:selectItems value="#{itinerario.lstProvincia}" var="obj"
					                       itemLabel="#{obj.nombre}" itemValue="#{obj.id}"></f:selectItems>
					            </h:selectOneMenu>
							</td>
						</tr>
						<tr>
							<td><h:outputText value="Telefono de Contacto"></h:outputText></td>
							<td><h:inputText id="txtTelfContacto" value="#{itinerario.persona.telfContacto}"></h:inputText></td>
						</tr>
						<tr>
							<td><h:outputText value="Email"></h:outputText></td>
							<td><h:inputText id="txtEmail" value="#{itinerario.persona.email}"></h:inputText></td>
						</tr>
						<tr>
							<td><h:commandButton id="btnDescartar" value="Descartar Asiento"></h:commandButton></td>
							<td><h:commandButton id="btnAgregarCarrito" value="Agregar Carrito"></h:commandButton></td>
						</tr>
					</table>
					
					</p:panel>
				</td>
			</tr>
		</table>
		
		</p:panel>
	</center>
	</h:form>

</h:body>

</html>